<template>
  <div :class="isPC ? '' : 'mobile-custom-date-time-picker'" class="custom-date-time-picker">
    <el-dialog title="" :width="isPC ? '50%' : '100%'" :close-on-click-modal="false" :visible="visible" @close="closeDialog">

      <div class="radio-wrap">
        <el-radio-group v-model="select" size="medium">
          <el-radio-button label="date">日</el-radio-button>
          <el-radio-button label="week">周</el-radio-button>
          <el-radio-button label="month">月</el-radio-button>
          <el-radio-button label="quarter">季</el-radio-button>
        </el-radio-group>
      </div>
      <div v-if="select !== 'quarter'" class="date-picker-wrap" style="margin-top:5px">
        <el-date-picker
          v-model="startVal"
          :type="type"
          placeholder="起始日期"
          :format="format"
          value-format="yyyy-MM-dd HH:mm:ss"
          :picker-options="startPickerOptions"
          @change="startChangeHandler"
        />
        <span class="pr-5 pl-5">至</span>
        <el-date-picker
          v-model="endVal"
          :type="type"
          placeholder="结束日期"
          :format="format"
          value-format="yyyy-MM-dd HH:mm:ss"
          :picker-options="endPickerOptions"
          @change="endChangeHandler"
        />
      </div>
      <div v-else class="date-picker-wrap" style="margin-top:5px">
        <quarter-date-picker
          placeholder="起始日期"
          :start-season="startSeason"
          :end-season="endSeason"
          @chooseSeason="seasonStartChange"
        />
        <span class="pr-5 pl-5">至</span>
        <quarter-date-picker
          placeholder="结束日期"
          :is-end="true"
          :end-season="endSeason"
          :start-season="startSeason"
          @chooseSeason="seasonEndChange"
        />
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirmHandlerClick">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import { disbledDateFun } from '@/utils'
import QuarterDatePicker from '@/components/QuarterDatePicker'
import { IsPC, dateTimeMap } from '@/utils'
import moment from 'moment'
moment.locale('zh-cn')
// const currYear = moment().year()
// const currWeek = moment().week()
// const currMonth = moment().month()
// const currDate = moment().date()
// console.log(moment().endOf('week').format('YYYY-MM-DD'))
export default {
  name: 'CustomDateTimePicker',
  components: { QuarterDatePicker },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isPC: IsPC(),
      visible: false,
      select: 'date',
      type: 'date',
      format: 'yyyy 第 WW 周',
      startVal: '',
      endVal: '',
      startSeason: '',
      endSeason: ''
    }
  },
  computed: {
    endPickerOptions() {
      const pickerOptions = {
        firstDayOfWeek: 1,
        disabledDate: (time) => {
          if (this.select === 'date') {
            if (moment(time).valueOf() < moment(this.startVal).valueOf()) {
              return true
            }
          }
          if (this.select === 'week') {
            const week = moment(time).week()
            if (week > moment().week()) {
              return true
            }
            // if (moment(time).format('YYYY-MM-DD') === moment(this.startVal).subtract(2, 'day').format('YYYY-MM-DD')) {
            //   return true
            // }
            if (week < moment(this.startVal).week()) {
              return true
            } else {
              return false
            }
          }

          if (this.select === 'month') {
            const month = moment(time).month()
            if (month > moment().month()) {
              return true
            }
            if (month < moment(this.startVal).month()) {
              return true
            } else {
              return false
            }
          }

          if (moment(time).valueOf() >= Date.now()) {
            return true
          }
          return false
        }
      }
      return pickerOptions
    },
    startPickerOptions() {
      const pickerOptions = {
        firstDayOfWeek: 1,
        disabledDate: (time) => {
          if (this.select === 'date') {
            if (moment(time).valueOf() > moment(this.endVal).valueOf()) {
              return true
            }
          }
          if (this.select === 'week') {
            const week = moment(time).week()
            if (week > moment().week()) {
              return true
            }
            if (week > moment(this.endVal).week()) {
              return true
            } else {
              return false
            }
          }

          if (this.select === 'month') {
            const month = moment(time).month()
            if (month > moment().month()) {
              return true
            }
            if (month > moment(this.endVal).month()) {
              return true
            } else {
              return false
            }
          }

          if (moment(time).valueOf() >= Date.now()) {
            return true
          }
          return false
        }

      }

      return pickerOptions
    }
  },
  watch: {
    dialogVisible: {
      immediate: true,
      handler(val) {
        this.visible = val
      }
    },
    select: {
      immediate: true,
      handler(val) {
        this.type = val
        switch (val) {
          case 'date':
            this.format = 'yyyy-MM-dd'
            break
          case 'week':
            this.format = 'yyyy 第 WW 周'
            break
          case 'month':
            this.format = 'yyyy 第 MM 月'
            break
          case 'quarter':

            break
          default:
            break
        }
        this.startVal = ''
        this.endVal = ''
        this.startSeason = ''
        this.endSeason = ''
      }
    }
  },
  mounted() {
  },
  methods: {
    seasonStartChange(val) {
      if (val) {
        this.startSeason = moment(val).format('YYYY-MM-DD HH:mm:ss')
      } else {
        this.startSeason = val
      }
    },
    seasonEndChange(val) {
      if (val) {
        this.endSeason = moment(val).add(2, 'month').endOf('month').format('YYYY-MM-DD HH:mm:ss')
      } else {
        this.endSeason = val
      }
    },
    startChangeHandler(val) {
    },
    endChangeHandler(val) {
      if (!this.startVal) {
        this.$message.warning({
          message: '请选择开始日期',
          duration: 3000
        })
        this.endVal = ''
        return false
      }
    },
    confirmHandlerClick() {
      if (!this.startVal && !this.startSeason) {
        this.$message.error('请选择开始日期')
        return false
      }
      if (!this.endVal && !this.endSeason) {
        this.$message.error('请选择结束日期')
        return false
      }
      this.visible = false
      const data = { type: dateTimeMap[this.select] }
      if (this.select === 'quarter') {
        if (!this.startSeason || !this.endSeason) return
        data.startTime = this.startSeason
        data.endTime = this.endSeason
      } else {
        if (!this.endVal || !this.startVal) return
        let startTime = this.startVal
        let newEndTime = moment(this.endVal).endOf('day').format('YYYY-MM-DD HH:mm:ss')
        if (this.select === 'week') {
          startTime = moment(this.startVal).subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss')
          newEndTime = moment(newEndTime).add(5, 'day').format('YYYY-MM-DD HH:mm:ss')
        } else if (this.select === 'month') {
          newEndTime = moment(newEndTime).endOf('month').format('YYYY-MM-DD HH:mm:ss')
        }
        data.endTime = newEndTime
        data.startTime = startTime
      }
      this.$emit('chooseDateTime', data)
    },
    closeDialog() {
      this.visible = false
      this.$emit('closeCustomDateTimePickerDialog')
    }
  }
}
</script>

<style>
  .el-message{
   min-width: 320px;
  }
</style>

<style rel="stylesheet/scss"  lang="scss" scoped>

/deep/ .el-picker-panel{
  position: absolute;
}
.mobile-custom-date-time-picker{
  /deep/ .el-picker-panel{
    position: fixed;
    right: 0;
  }
}

/deep/ .el-dialog__body{
  padding: 20px 10px;
}
/deep/ .el-input--prefix .el-input__inner{
  padding: 0 10px 0 30px;
}
.radio-wrap {
  /deep/ .el-radio-button{
    margin: 0 5px;
    border-radius: 2px;
    border: 1px solid #DCDFE6;

  }
  /deep/ .el-radio-button__inner{
    border: 0;
    border-radius: 2px;
  }
}
.custom-date-time-picker {
  .date-picker-wrap {
    display: flex;
    display: -webkit-flex;
    // justify-content: space-around;
    align-items: center;
  }
}

</style>
